<template>
  <div class="annualScheduling">
    <div class="left">
      <div class="container">
        <el-button class="arrow" type="primary" :icon="ArrowUp" circle @click="scrollUp" />
        <el-scrollbar ref="scrollContainer" class="scroll-wrapper">
          <div v-for="(item, index) in items" :key="index" class="content-item">
            {{ item }}
          </div>
        </el-scrollbar>
        <el-button class="arrow" type="primary" :icon="ArrowDown" circle @click="scrollDown" />
      </div>
    </div>
    <div class="right">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane class="lable" label="值班排班" name="first"></el-tab-pane>
        <el-tab-pane class="lable" label="巡检排班" name="second"></el-tab-pane>
      </el-tabs>
      <!-- 值班排班 -->
      <div v-if="activeName == 'first'" class="tableBg">
        <dutyTable></dutyTable>
      </div>
      <!-- 巡检排班 -->
      <div v-if="activeName == 'second'" class="tableBg">
        <inspectionTable></inspectionTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElScrollbar, ElButton } from 'element-plus'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import inspectionTable from './inspectionTable.vue';
import dutyTable from './dutyTable.vue';

const activeName = ref('first')

const handleClick = (tab: any, event: Event) => {
  console.log(tab, event)
  activeName.value = tab.paneName
}

const items = Array.from({ length: 12 }, (_, i) => `2025-${i + 1}`)
const scrollContainer = ref<InstanceType<typeof ElScrollbar> | null>(null)
const itemHeight = 40 // 根据实际样式高度设置

const scrollUp = () => {
  const currentScrollTop = scrollContainer.value?.wrapRef?.scrollTop || 0
  scrollContainer.value?.setScrollTop(Math.max(currentScrollTop - itemHeight, 0))
}

const scrollDown = () => {
  const wrap = scrollContainer.value?.wrapRef
  if (!wrap) return

  const currentScrollTop = wrap.scrollTop
  const maxScrollTop = wrap.scrollHeight - wrap.clientHeight
  scrollContainer.value?.setScrollTop(Math.min(currentScrollTop + itemHeight, maxScrollTop))
}
</script>

<style lang="scss" scoped>
.annualScheduling {
  display: flex;
  .left {
    width: vw(178);
    padding: vh(20) vh(20);
    .container {
      width: vw(118);
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      // border: 1px solid var(--el-border-color);
      border-radius: 4px;
    }

    :deep(.el-scrollbar) {
      width: 100%;
      height: vh(750);
      .content-item {
        height: vh(50);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: vh(29);
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        // &:last-child {
        //   border-bottom: none;
        // }
        position: relative;
      }

      .content-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #00E3FE 0%, #00C8E2 100%);
        opacity: 0.13;
        z-index: -1;
        /* 确保背景不遮挡其他内容 */
      }

      .content-item:hover {
        cursor: pointer;
        /* 鼠标悬停时，改变背景透明度 */
      }

      .content-item:hover::before {
        opacity: 0.3;
        /* 鼠标悬停时，改变伪元素背景透明度 */
        background: linear-gradient(90deg, #00E3FE 100%, #00C8E2 100%);
        /* 鼠标悬停时的背景渐变 */
      }

      /* 隐藏原生滚动条（ElementPlus自带滚动条已处理） */
      .el-scrollbar__thumb {
        display: none;
      }
    }



    .arrow {
      width: 32px;
      height: 32px;

      /* 点击时取消焦点边框 */
      &:focus {
        outline: none;
      }
    }
  }

  .right {
    padding-left: vw(40);
    width: vw(1684);
    .el-tabs {
      :deep(.el-tabs__item) {
        padding: 0 vh(18);
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: vh(16);
        color: #FFFFFF;
        height: vh(26);
        line-height: vh(26);

        &#tab-first {
          padding-left: 0;
        }
      }

      :deep(.el-tabs__item.is-active) {
        color: #00DEFA;
      }

      :deep(.el-tabs__active-bar) {
        background-color: #00DEFA;
        height: vh(2);
      }

      :deep(.el-tabs__nav-wrap) {
        &::after {
          background: rgba(255, 255, 255, 0);
          height: vh(1);
        }
      }
    }
    .tableBg {
      margin-top: vh(10);
    }
  }
}
</style>